<template>
  <el-drawer :visible.sync="drawerTitleVisible" :with-header="false" :before-close="beforeClose" size="32%">
    <div class="t-drawer" v-loading="loading">
      <div class="phone-review">
        <div class="review-bg"></div>
        <div class="rewiew-component">
          <ul class="ul-flex" v-if="imgList.length == 1">
            <li class="flex-left">
              <h5 class="threeLineOverflow">{{ title }}</h5>
              <div class="article-footer">{{ userName }} 0评价 1分钟内</div>
            </li>
            <li class="flex-right">
              <img :src="imgList[0]" alt="" />
            </li>
          </ul>
          <div class="level-ul" v-if="imgList.length == 3">
            <h5 class="title twoLineOverflow">{{ title }}</h5>
            <div class="img-flex">
              <img :src="imgList[0]" />
              <img :src="imgList[1]" />
              <img :src="imgList[2]" />
            </div>
            <p class="article-footer">{{ userName }} 0评价 1分钟内</p>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import { getLocalStorage } from '@/utils/index';

export default {
  props: {
    drawerTitleVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    imgList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      userName: ''
    };
  },
  created() {
    this.userName = '萌新' + getLocalStorage('userName').substring(7, 11);
  },
  methods: {
    beforeClose() {
      this.$emit('beforeClose');
    }
  }
};
</script>
<style lang="scss" scoped>
.t-drawer {
  display: flex;
  justify-content: center;
  .phone-review {
    position: relative;
    height: 715px;
    padding-top: 20px;
    text-align: left;
    .review-bg {
      height: 100%;
      width: 360px;
      background: url('//sf1-ttcdn-tos.pstatp.com/obj/mp/preview_feed.png') no-repeat;
      background-size: cover;
    }
    .rewiew-component {
      position: absolute;
      top: 136px;
      left: 36px;
      width: 289px;
      height: 474px;
      padding: 6px 12px 0;
      background: #fff;
      .ul-flex {
        display: flex;
        .flex-left {
          flex: 1;
          width: 0;
          padding-right: 8px;
          h5 {
            font-size: 14px;
            color: #333;
            line-height: 20px;
            min-height: 38px;
          }
          .article-footer {
            font-size: 12px;
            color: #999;
            margin-top: 8px;
          }
        }
        .flex-right {
          flex: 0 0 85px;
          img {
            width: 85px;
            height: 65px;
            border-radius: 1px;
            margin-top: 2px;
          }
        }
      }
      .level-ul {
        padding-bottom: 8px;
        border-bottom: 1px solid #f8f8f8;
        .title {
          font-size: 14px;
          color: #333;
          line-height: 20px;
        }
        .img-flex {
          display: flex;
          justify-content: space-between;
          margin-top: 4px;
          img {
            width: 30%;
            height: 50px;
            object-fit: cover;
            border-radius: 2px;
          }
        }
        .article-footer {
          font-size: 12px;
          color: #999;
          margin-top: 8px;
        }
      }
    }
  }
}
</style>
